<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>机构认证申请</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/webUpload/webuploader.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_4cu73hwimwr35wmi.css"/>

    <style type="text/css">
        .information-card{margin-top:0;}
        .information-card .list-block,.organize-content .list-block{border-bottom: 2px solid #eee;}
        .information-card .item-inner .item-title,.organize-content .item-content .item-title {font-size: 16px;!important; }
        .information-card .item-inner .item-after,.organize-content .item-content .item-input input{font-size:14px;!important; }
        .information-card .item-inner{padding: 10px 0 10px 15px; }
        .content-block-title{margin-top: 10px!important;}
        .img-card .card-content-inner{padding: 10px  15px!important; }
        .img-card .card-content-inner img{width: 25%;height: 70px;margin-left:6%;}
        .bar-tab,.bar .button-link{height: 2.25rem;}

        #tool-bar a{width: 50%;float: left;line-height: 45px;height: 45px;}
        #confirmBtn,#confirm-select{background-color: #00b0ec;color: #ffffff;}
        #cancelBtn{background-color:#ffffff; color: #3d4145;}
        .picker-columns {height: 200px;}
        .bar .button-link{font-size: 16px;padding-right: 10px; line-height: 45px;height:45px;}
        .picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only{padding-top: 15px;}
        .picker-modal .bar-nav { background-color: #FFFFFF;}
        .item-content{border-bottom: 1px solid #dadada;}
        input[type=checkbox]{margin-right: 5px;}
        .list-block .item-inner:after{  display: none;}
        .webuploader-pick, .webuploader-pick+div{width: 100%!important;}
    </style>
</head>

<body>

<div class="page-group">
    <div class="page page-current" id="pageOne">
        <!--头部部分 !-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left back" href="">返回</a>
            <h1 class="title">认证申请</h1>
        </header>
        <div class="content organize-content">
            <div class="information-card card">
                <div class="card-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-inner">
                                    <div class="item-title">机构名称</div>
                                    <div class="item-after" id="name"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-inner">
                                    <div class="item-title">机构负责人</div>
                                    <div class="item-after "id='principal'></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-inner">
                                    <div class="item-title">联系电话</div>
                                    <div class="item-after" id="principalPhone"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="area-card card">
                <div class="card-content">
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">所在地区</div>
                            <div class="item-input">
                                <input type="text"  id='city-picker' placeholder="请选择地区" readonly >
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">详细地址</div>
                            <div class="item-input">
                                <input type="text" placeholder="详细地址" id='area'>
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">成立时间</div>
                            <div class="item-input">
                                <input type="text" data-toggle='date' id="time" />
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <a class="item-content to-area" href="#pageTwo">
                            <div class="item-title label ">服务领域</div>
                            <div class="item-input">
                                <input type="text" readonly class="area-text"/>
                            </div>
                            <span class="iconfont icon-xiangyou pull-right"></span>
                        </a>
                    </div>
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">机构介绍</div>
                            <div class="item-input">
                                <textarea class="o-info"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-block-title">机构照片</div>
            <div class="card img-card">
                <div class="card-content">
                    <div class="card-content-inner imgList">
                    </div>
                </div>
                <input type="hidden" id="productImgs"/>
                <div id="filePicker">上传图片</div>
            </div>
        </div>
        <nav class="bar bar-tab organize-bar-tab" id="tool-bar">
            <a href="${basepath}/front/account/toAccountList"  class="tab-item" id="cancelBtn">取消</a>
            <a  class="tab-item" id="confirmBtn" data-url="${basepath}/front/account/toAccountList">确认</a>
        </nav>
    </div>

    <#--服务领域选择页面-->
    <div class="page" id="pageTwo">
        <header class="bar bar-nav">
            <h1 class="title">服务领域</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul class="check-list">
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a1" data-id="1" /><label for="a1">扶贫济困</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a2" data-id="2" /><label for="a2">助老助残</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a3" data-id="3"/><label for="a3">社区服务</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a4" data-id="4" /><label for="a4">生态建设</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a5" data-id="5" /><label for="a5">大型活动</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a6" data-id="6" /><label for="a6">抢险救灾</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a7" data-id="7" /><label for="a7">网络文明</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a8" data-id="8" /><label for="a8">社会管理</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a9" data-id="9" /><label for="a9">文化建设</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a10" data-id="10" /><label for="a10">西部开发</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a11" data-id="11"/><label for="a11">海外服务</label></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bar bar-tab">
            <a class="tab-item " id="confirm-select" ">
                确定
            </a>
        </div>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type='text/javascript' src='${staticpath}/webUpload/webuploader.min.js'charset='utf-8'></script>
<script>jQuery.noConflict();</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script  type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-city-picker.js' charset='utf-8'></script>
<script>
    $("#city-picker").cityPicker({
        value:[ ],
        toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-right close-picker">确定</button>\
    <h1 class="title">选择收货地址</h1>\
    </header>'
    });

</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/organizeEdit.js' charset='utf-8'></script>
<script>
    jQuery(function($){
//使用jquery$
        //图片上传
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            swf: '${staticpath}/webUploader/Uploader.swf',
            server: '${basepath}/manage/ued/config?action=uploadimage',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
            // 只允许选择图片文件
            fileNumLimit:3,
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('fileQueued', function(file) {
            var li = jQuery(
                            '<span id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '</span>'
                    ),
                  img =li.find('img');

            // $list为容器jQuery实例
            jQuery('.imgList').append(li);

            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // thumbnailWidth x thumbnailHeight 为 100 x 100
            uploader.makeThumb(file, function(error, src) {
                if(error) {
                    jQueryimg.replaceWith('<span>不能预览</span>');
                    return;
                }
                img.attr('src', src);
            }, 100, 100);
        });
//    上传图片地址数组
        var imgList='';
        uploader.on('uploadSuccess', function (file, response) {
            uploader.removeFile(file);
            //imagesStore.add(response);
            imgList += response.url+','
            jQuery("#productImgs").val(imgList);
        });
    });
</script>
</body>
</html>
